단방향 바인딩(One-way Binding)

외부에 상태 변화가 일어나면 자신의 상태를 변경. 자기 상태를 변경한다고 해서 외부에 전달 안됌.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
...
@Component({
    templateUrl: `
		<input type="text" [value]="like">
		{{ like }}
		<button class="{{myclass}}">{{myclass}}</button>
	`,
    styles: [`
	.my-italic { font-style: italic; }`]
})
export class MainPageComponent {
    like: string = "lala";
    myClass = "my-italic";
}

img

input에 입력을 해도 외부의 값에는 반영이 안되는 것을 알 수 있다.

  • 프로퍼티 바인딩

[속성] 또는 bind-속성 형태로 사용

1
2
3
4
5
<input type="text" [value]="like">
<input type="text" bind-value="like">

<button class="{{myclass}}">{{myclass}}</button>
<button [ngClass]="myclass">{{myclass}}</button>
  • 클래스 바인딩

CSS로 정의한 클래스 이름에 접근, 할당되야할 값은 반드시 boolean형

1
<div [class.positive]="isPositive">상태</div>
  • 스타일 바인딩

CSS로 정의한 클래스 이름에 접근, 할당 되야할 값은 구체적인 스타일 이름

1
<div [style.color]="isPositive? 'blue':'black'">상태</div>
  • 이벤트 바인딩

(이벤트) 또는 bind-이벤트 형태로 사용

1
2
<button (click)="onSave()">저장</button>
<button on-click="onSave()">저장</button>

이벤트 정보 : https://developer.mozilla.org/en-US/docs/Web/Events

양방향 바인딩(Two-way Binding)

외부&내부 상태변화를 전달 및 반영함. [(ngModel)] 또는 bindon-ngModel을 사용.

1
2
3
4
<input type="text" [(ngModel)]="city">
<input type="text" bindon-ngModel="city">

<input [value]="city" (input)="city=$event.target.value">

실행 순서상 이벤트 바인딩인 ()가 처리되고, 프로퍼티 바인딩인 []가 처리 된다.

Reference

쉽고 빠르게 배우는 Angular2 프로그래밍 - 정진욱 지음